<template>
  <div class="page-content">
    <MieTable
      ref="tableRef"
      :pageData="pageData"
      :pageListTotal="pageListTotal"
      v-bind="pageContentConfig"
      @sizeChange="handleSizeChage"
      @currentChange="handleCurrentChage"
    >
      <template #headBtnSlot>
        <el-button v-if="isCreate" type="primary" @click="emitCreateData"
          >新建数据</el-button
        >
        <template v-if="pageContentConfig.childrenPropos">
          <el-button v-if="!isExpand" type="success" @click="onExpand"
            >展开所有</el-button
          >
          <el-button v-else-if="isExpand" type="warning" @click="onExpand"
            >收缩所有</el-button
          >
        </template>
      </template>

      <template #imageSlot="scope">
        <el-image
          class="image"
          style="width: 100px; height: 100px"
          :src="scope.row['imgUrl']"
          :preview-src-list="[scope.row['imgUrl']]"
          :hide-on-click-modal="true"
          :preview-teleported="true"
          :zoom-rate="1.2"
          fit="cover"
      /></template>
      <template #iconSlot="scope">
        <el-icon>
          <component :is="scope.row['icon']?.split('-icon-')[1]" />
        </el-icon>
      </template>
      <template #tagSlot="scope">
        <el-tag
          class="ml-2"
          :type="scope.row['status'] ? 'success' : 'danger'"
          >{{ scope.row["status"] ? "到达" : "未到达" }}</el-tag
        >
      </template>

      <template #enableSlot="scope">
        <el-switch
          v-model="scope.row['enable']"
          :active-value="1"
          :inactive-value="0"
          @click="onSwitcha(scope.row['enable'], scope.row['id'])"
        />
      </template>

      <template #statusSlot="scope">
        <el-switch
          v-model="scope.row['status']"
          :active-value="1"
          :inactive-value="0"
          @click="onSwitchb(scope.row['status'], scope.row['id'])"
        />
      </template>
      <template #typeSlot="scope">
        <el-tag
          class="ml-2"
          :type="
            scope.row['type'] === 1
              ? 'danger'
              : scope.row['type'] === 2
              ? 'success'
              : 'info'
          "
          >{{
            scope.row["type"] === 1
              ? "菜单目录"
              : scope.row["type"] === 2
              ? "菜单项"
              : "按钮权限"
          }}</el-tag
        >
      </template>
      <template #createAt="scope">
        <span>{{ formatUtcString(scope.row["createAt"]) }}</span>
      </template>
      <template #updateAt="scope">
        <span>{{ formatUtcString(scope.row["updateAt"]) }}</span>
      </template>
      <template #btnSlot="scope">
        <el-button
          v-if="isUpdate"
          class="btn"
          size="small"
          @click="emitEdit(scope.row)"
          :icon="Edit"
        ></el-button>
        <el-button
          v-if="isDelete"
          class="btn"
          size="small"
          type="danger"
          @click="handleDelete(scope.row)"
          :icon="Delete"
        ></el-button>
      </template>
    </MieTable>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import usePermission from "@/hooks/usePermission";
import useSystemStore from "@/stores/main/system/system";
import { Delete, Edit } from "@element-plus/icons-vue";
import { formatUtcString } from "@/utils/date-format";

import MieTable from "@/base-ui/table";
interface IPageContentProps {
  pageContentConfig: any;
}

const props = defineProps<IPageContentProps>();

const emits = defineEmits(["createData", "edit"]);

const systemStore = useSystemStore();
// 初始化一下,因为会保存上个页面的数据
systemStore.offset = 0;
systemStore.size = 10;

// 为什么要这样子调用呢为了父组件的可共用性，父组件直接ref实例调用这个方法方便传搜索过来的参数好调用,为什么这里不直接用声明式函数呢因为函数提升所以defineexpose可以放在最前面，不然只能放在最后面很丑
const getPageData = (queryInfo?: any) => {
  systemStore.getPageListAction(props.pageContentConfig.pageName, {
    offset: systemStore.offset * systemStore.size,
    size: systemStore.size,
    ...queryInfo,
  });
};
getPageData();

const pageData = computed(() => systemStore.pageContenList);
const pageListTotal = computed(() => systemStore.pageListTotal);

// 编辑和删除发送出去,在主页面控制弹窗和回显
const emitEdit = (row: any) => {
  emits("edit", row);
};
const emitCreateData = () => {
  emits("createData");
};
const handleDelete = (row: any) => {
  systemStore.deleteListAction(props.pageContentConfig.pageName, row.id);
};

const handleCurrentChage = (e: any) => {
  systemStore.offset = e - 1;
  getPageData();
};

const handleSizeChage = (e: any) => {
  systemStore.size = e;
  getPageData();
};

//是否禁用状态的开关
const onSwitcha = (e: any, id: number) => {
  console.log(e);
  if (id) {
    systemStore.editAction(props.pageContentConfig.pageName, { enable: e }, id);
  }
};

//是否禁用状态的开关
const onSwitchb = (e: any, id: number) => {
  console.log(e);
  if (id) {
    systemStore.editAction(props.pageContentConfig.pageName, { status: e }, id);
  }
};

// 查看是否有增删查改权限
const isCreate = usePermission(`${props.pageContentConfig.pageName}:create`);
const isDelete = usePermission(`${props.pageContentConfig.pageName}:delete`);
const isUpdate = usePermission(`${props.pageContentConfig.pageName}:update`);

const tableRef = ref<InstanceType<typeof MieTable>>();
const isExpand = ref(false);
tableRef.value?.isExpandAll(isExpand.value);

const onExpand = () => {
  isExpand.value = !isExpand.value;
  console.log(isExpand.value);
  tableRef.value?.isExpandAll(isExpand.value);
};
defineExpose({ getPageData });
</script>

<style lang="less" scoped>
.btn {
  width: 24px;
  height: 24px;
}
.image {
  z-index: 999 !important;
}
</style>
